<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="communityInteraction"
      class="demo-ruleForm"
      :inline="true"
      size="mini"
    >
      <el-form-item label="昵称" prop="ownerNickname">
        <el-input v-model="communityInteraction.ownerNickname" style="width: 170px" />
      </el-form-item>
      <el-form-item label="真实姓名" prop="ownerRealName">
        <el-input v-model="communityInteraction.ownerRealName" style="width: 170px" />
      </el-form-item>
      <el-form-item label="手机号码" prop="ownerPhoneNumber">
        <el-input v-model.number="communityInteraction.ownerPhoneNumber" style="width: 170px" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="loadPages(current,size,communityInteraction)">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetForm(communityInteraction)">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="isOpen" :title="title">
      <el-form :model="newInteraction">
        <el-row style="margin-top: 20px">
          <el-col :span="12">
            <el-form-item label="业主姓名" :label-width="formLabelWidth">
              <el-select v-model="newInteraction.userId" placeholder="请选择">
                <el-option
                  v-for="item in owners"
                  :key="item.ownerId"
                  :label="item.ownerRealName"
                  :value="item.ownerId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小区名称" :label-width="formLabelWidth">
              <el-select v-model="newInteraction.communityId" placeholder="请选择">
                <el-option
                  v-for="item in Communities"
                  :key="item.communityId"
                  :label="item.communityName"
                  :value="item.communityId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="互动内容" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="newInteraction.content" autocomplete="off"  ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-upload
            class="upload-demo"
            action="http://localhost:8080/zyOwner/upload"
            :headers="token"
            :on-success="handleSuccess"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary" plain style="margin-left: 50px">点击上传</el-button>
          </el-upload>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="addOwner(newInteraction)" v-if="isAdd==false" size="mini">添 加</el-button>
        <el-button @click="isOpen = false" size="mini">取 消</el-button>
      </div>
    </el-dialog>


    <el-row :gutter="10" class="mb8">
      <el-col>
        <right-toolbar
          :show-search.sync="showSearch"
          @queryTable="loadPages(current,size,communityInteraction)"
        />
      </el-col>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="communityInteractionList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >

      <el-table-column
        label="序号"
        type="index"
        :index="indexMethod"
        align="center"
      />
      <el-table-column
        label="业主昵称"
        width="120px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerNickname }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="业主姓名"
        width="100px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerRealName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="手机号码"
        width="120px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerPhoneNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="180px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="内容"
        align="center"
        width="200px"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="图片"
        align="center"
      >
        <template slot-scope="scope">
          <el-carousel :interval="4000" type="card" height="120px">
            <el-carousel-item v-for="(item,index) in imgUrl" v-if="scope.row.interactionId == item.parentId" :key="index">
              <h3 class="medium"> <el-image :src="item.filesUrl" fit="fill" /></h3>
            </el-carousel-item>
          </el-carousel>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="150px" align="center">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-tickets" @click="handleEdit(scope.row)">评论</el-button>
          <el-button type="text" icon="el-icon-delete" @click="auditRecords(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="社区互动详情"
      :visible.sync="dialogFormVisible"
      width="40%"
    >
      <div>
        <el-card class="box-card">
          <div style="float: left; width:60px;height: 40%">
            <img
              :src="ownerComment.ownerPortrait"
              width="60px"
              height="60px"
              style="border-radius: 50%"
            >
          </div>
          <div style="float: left;margin-left: 15px;width: 80%">
            <div style="font-size: 23px;margin-top: 10px;font-weight:700">{{ ownerComment.ownerNickname }}</div>
            <div>{{ ownerComment.createTime }}</div>
            <div style="margin-top: 30px">
              <span style="font-size: 17px">{{ ownerComment.content }}</span>
            </div>
            <div style="background: #efefef; margin-top:20px">
              <div v-for="items in comments" v-if="items.zyoNickName != null" class="text item">
                <el-row style="margin-top: 20px">
                  <el-col :span="2">
                    <img
                      :src="items.zyoPortrait"
                      width="40px"
                      height="40px"
                      style="border-radius: 50%;margin-left:10px"
                    >
                  </el-col>
                  <el-row style="display:inline-block;margin-top: 5px">
                    <el-col style="font-size: 17px;margin-left: 40px">{{ items.zyoNickName }}</el-col>
                    <el-col style="margin-left: 40px;margin-top: 5px;font-size: 11px;"> {{ items.zcCreateTime }}</el-col>
                  </el-row>
                </el-row>
                <el-row style="font-size: large;margin-left: 80px;margin-top: 5px">
                  <el-col >
                    <el-row  v-for="commentOwner in commentAndOwner"  v-if="commentOwner.parentId == items.zcCommentId"  style="font-size: 12px;">回复
                        <el-link type="primary" underline="false" @click="getOwnerByOwnerNickname(commentOwner.ownerNickname)">@{{commentOwner.ownerNickname}}</el-link>
                    </el-row>
                    <el-row style="font-size: 16px; margin-top: 5px" >{{ items.zcComment }}</el-row>
                  </el-col>
                  <el-col><el-button type="text" plain icon="el-icon-delete" @click="deleteComment(items)">删除</el-button></el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" plain @click="displayComment(ownerComment)">评 论</el-button>
      </span>
    </el-dialog>

    <el-dialog title="用户信息" :visible.sync="dialogOwner">
      <el-form :model="commentOwner">
        <el-form-item label="用户昵称" :label-width="formLabelWidth">
          <el-input v-model="commentOwner.ownerNickname" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" :label-width="formLabelWidth">
          <el-input v-model="commentOwner.ownerRealName" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" :label-width="formLabelWidth">
          <el-input v-model="commentOwner.ownerIdCard" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="commentOwner.ownerPhoneNumber" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogOwner = false">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog :visible.sync="dialogComment" :title="title">
      <el-form :model="ownerComment">
        <el-row style="margin-top: 20px">
          <el-col :span="12">
            <el-form-item label="昵称" :label-width="formLabelWidth">
              <el-select v-model="ownerComment.userId" placeholder="请选择">
                <el-option
                  v-for="item in owners"
                  :key="item.ownerId"
                  :label="item.ownerNickname"
                  :value="item.ownerId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="回复信息" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="ownerComment.content" autocomplete="off"  ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="addComment(ownerComment)" size="mini">回 复</el-button>
        <el-button @click="dialogComment = false" size="mini">取 消</el-button>
      </div>
    </el-dialog>


    <div class="block">
      <el-pagination
        :current-page="this.current"
        :page-sizes="[1,3,5,10,15,20]"
        :page-size="this.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>

<script>
    import { getToken } from '@/utils/auth'
    import { listAllCommunity } from '@/api/community'
export default {
  name: 'Index',
  data() {
    return {
      total: 0, // 查询的总数
      current: 1, // 当前页
      size: 3, // 每页显示的条数
      multipleSelection: [], // 多选框的集合
      communityInteractionList: [], // 业主房屋审核对象的集合
      communityInteraction: {
        userId:'',
        communityId:'',
        interactionId: '',
        ownerNickname: '',
        ownerRealName: '',
        ownerPhoneNumber: '',
        createTime: '',
        content: '',
        ownerPortrait: ''
      },
      Communities:[],
      comments: [], // 评论集合
      showSearch: true, // 显示/隐藏搜索栏
      dialogFormVisible: false, // 显示/隐藏更多操作表单
      ownerComment: {},
      imgUrl: [],
      newInteraction:{},
      isOpen:false,
      isAdd:false,
      formLabelWidth:'120px',
      title:'',
      token:{"Authorization" : getToken()},
      owners:[],
      fileList:[],
      dialogImageUrl:'',
      dialogComment:false,
      delInteraction:{},
      commentAndOwner:[],
      commentOwner:{},
      dialogOwner:false,
    }
  },


  // 钩子函数
  created() {
    this.loadPages(this.current, this.size, this.communityInteraction)
    this.getAllImg()
  },
  methods: {
    loadPages(currentPage, sizePage, communityInteraction) {
      this.axios.get('http://localhost:8080/zyCommunityInteraction/page/?' + this.qs.stringify(communityInteraction),
        {
          params: {
            pageCurrent: currentPage,
            pageSize: sizePage
          }
        })
        .then(res => {
          if (res.data.status == 'OK') {
            this.communityInteractionList = res.data.data.records,
            this.current = res.data.data.current,
            this.size = res.data.data.size,
            this.total = res.data.data.total
          }
        })
    },
    getAllImg() {
      this.axios.get('http://localhost:8080/zyCommunityInteraction/getAllImg/')
        .then(res => {
          this.imgUrl = res.data.data
        })
    },
    // 更多操作
      handleEdit(row) {
      this.delInteraction = row
      this.dialogFormVisible = true
      this.ownerComment = this.qs.parse(this.qs.stringify(row))
      this.axios.get('zyComment/list/' + row.interactionId)
        .then(res => {
          this.comments = res.data.data
        })
      this.axios.get('zyComment/getAllCommentAndOwner/' + row.interactionId)
          .then(res => {
              this.commentAndOwner = res.data.data
          })
    },
    // 删除某条评论
    async deleteComment(row) {
      this.$confirm('是否删除该评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
        center: true
      }).then(async() => {
        await this.axios.delete('zyComment/delete/' + row.zcCommentId)
          .then(res => {
            this.result(res)
          })
          await this.handleEdit(this.delInteraction)
      })
    },
    // 删除某条社区互动
    async auditRecords(row) {
      this.$confirm('是否删除该社区互动信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
        center: true
      }).then(async() => {
        await this.axios.delete('zyComment/del/' + row.interactionId)
          .then(res => {
            this.result(res)
          })
        this.loadPages(this.current, this.size, this.communityInteraction)
      })
    },
    // 修改每页显示的数据条数
    handleSizeChange(size) {
      this.size = size
      this.loadPages(this.current, this.size, this.communityInteraction)
    },
    // 修改当前页面
    handleCurrentChange(current) {
      this.current = current,
      this.loadPages(this.current, this.size, this.communityInteraction)
    },
    // 多选框选择
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 重置表单数据
    resetForm(formName) {
      this.communityInteraction.ownerNickname = ''
      this.communityInteraction.ownerRealName = ''
      this.communityInteraction.ownerPhoneNumber = ''
      this.communityInteraction.createTime = ''
      this.communityInteraction.content = ''
      this.communityInteraction.img = ''
      this.loadPages(this.current, this.size, this.communityInteraction)
    },
    // 修改序号
    indexMethod(index) {
      index = (index + 1) + (this.current - 1) * this.size
      return index
    },
    async handleAdd(){
      this.isOpen = true
      this.newInteraction = this.qs.parse(this.qs.stringify(this.communityInteraction))
      let res =await listAllCommunity()
      this.Communities = res.data
      this.title = '添加互动信息'
      await this.axios.get("zyOwner/list").then(res => {
          this.owners = res.data.data
          })
    },
    handleSuccess(res, file) {
        this.dialogImageUrl=URL.createObjectURL(file.raw);
        this.newInteraction.ownerNickname=this.newInteraction.ownerNickname + "," + res
        console.log(this.newInteraction.ownerNickname)
    },
    handlePreview(file){
        this.dialogImageUrl = file.url;
    },
    handleRemove(file,fileList){
        // fileList 为删除后的文件列表
        const value = fileList.map(v => v.url)
        this.$emit('input', value)
    },
      //添加社区互动
   async addOwner(row){
       await this.axios.post("zyCommunityInteraction/addInteraction",this.qs.stringify(row))
            .then(res => {
                if (res.data == "ok"){
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                }
                this.isOpen = false
                this.newInteraction ={}
            })
       await  this.loadPages(this.current, this.size, this.communityInteraction)
       await this.getAllImg()
    },
      displayComment(row){
        this.dialogComment = true;
        this.ownerComment = this.qs.parse(this.qs.stringify(row))
          this.ownerComment.userId = ""
          this.ownerComment.content = ""
          this.ownerComment.createTime=""
          this.ownerComment.updateTime=""
        this.axios.get("zyOwner/list").then(res => {
              this.owners = res.data.data
          })
      },
     async addComment(row){
         console.log(row)
       await this.axios.post("zyComment/add",this.qs.stringify(row))
            .then(res =>{
                if (res.data.data == 'ok'){
                    this.$message.success("评论成功")
                }
                this.dialogComment = false
            })
       await this.handleEdit(row)
      },
      getOwnerByOwnerNickname(row){
        this.dialogOwner = true
        this.axios.get("zyOwner/getOwnerByOwnerNickname/"+row).then(
            res =>{
                this.commentOwner = res.data.data
            }
        )
      },
    result(res) {
      if (res.data.data == 'ok') {
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success',
          center: true
        })
        const totalPage = Math.ceil((this.total - 1) / this.size) // 总页数
        this.current = this.current > totalPage ? totalPage : this.current
        this.current = this.current < 1 ? 1 : this.current
      } else {
        this.$message({
          showClose: true,
          message: '出错了',
          type: 'error',
          center: true
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
